<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>F().anime</title>
<link type="text/css" rel="stylesheet" href="../css/admin.css" />
<link type="text/css" rel="stylesheet" href="../css/item_show.css" />
<script type="text/javascript" src="../../1st.js"></script>
<script type="text/javascript" src="../../1st.highlight.js"></script>
</head>
<body id="split">
<div id="content">
	<div rel="F.param">
		<h2><span>返回值:</span>F().anime</h2>
					<h3>概述 : 动画组件</h3>
						
			<div class="desc">
				<div class="longdesc"><pre>ops配置参数说明:

在x,y,w,h,o等参数中，Number类型表示绝对位置，String类型参数表示相对位置，
比如x:120，表示移动到120px，x:'-120'表示x方向左移120px</pre></div>
			</div>
							<h3>语法1：F.anime(box,method,increment,step,speed)</h3>
						<table class="args">
				<!--caption>参数列表：(2)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>box</strong></td><td>ID,Node,fdom</td><td>DOM对象</td></tr>
									<tr><td><strong>ops</strong></td><td>Object</td><td>参数配置</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td>fdom</td><td></td></tr>
			</table>
					<h3>语法2：ops参数</h3>
						<table class="args">
				<!--caption>参数列表：(14)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>left</strong></td><td>Number,String</td><td>目的X坐标</td></tr>
									<tr><td><strong>top</strong></td><td>Number</td><td>目的Y坐标</td></tr>
									<tr><td><strong>width</strong></td><td>Number</td><td>目的宽度</td></tr>
									<tr><td><strong>height</strong></td><td>Number</td><td>目的高度</td></tr>
									<tr><td><strong>opacity</strong></td><td>Number</td><td>透明度</td></tr>
									<tr><td><strong>scrollLeft</strong></td><td>Number</td><td>scrollLeft</td></tr>
									<tr><td><strong>scrollTop</strong></td><td>Number</td><td>scrollTop</td></tr>
									<tr><td><strong>duration</strong></td><td>Number</td><td>动画持续时间(毫秒)</td></tr>
									<tr><td><strong>type</strong></td><td>String</td><td>动画公式类型</td></tr>
									<tr><td><strong>lock</strong></td><td>Boolean</td><td>动画是否允许停止</td></tr>
									<tr><td><strong>before</strong></td><td>Function</td><td>动画开始触发的事件</td></tr>
									<tr><td><strong>running</strong></td><td>Function</td><td>动画进行中触发的事件</td></tr>
									<tr><td><strong>after</strong></td><td>Function</td><td>动画加载完成触发的事件</td></tr>
									<tr><td><strong>stop</strong></td><td>Function</td><td>动画被中止触发的事件</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td></td><td></td></tr>
			</table>
					<h3>语法3：动画效果</h3>
						<table class="args">
				<!--caption>参数列表：(21)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>Linear</strong></td><td></td><td>匀速</td></tr>
									<tr><td><strong>slowIn</strong></td><td></td><td>缓慢渐入</td></tr>
									<tr><td><strong>slowOut</strong></td><td></td><td>缓慢渐出</td></tr>
									<tr><td><strong>slowBoth</strong></td><td></td><td></td></tr>
									<tr><td><strong>In</strong></td><td></td><td></td></tr>
									<tr><td><strong>Out</strong></td><td></td><td></td></tr>
									<tr><td><strong>Both</strong></td><td></td><td></td></tr>
									<tr><td><strong>fastIn</strong></td><td></td><td></td></tr>
									<tr><td><strong>fastOut</strong></td><td></td><td></td></tr>
									<tr><td><strong>circIn</strong></td><td></td><td></td></tr>
									<tr><td><strong>circOut</strong></td><td></td><td></td></tr>
									<tr><td><strong>circBoth</strong></td><td></td><td></td></tr>
									<tr><td><strong>elasticIn</strong></td><td></td><td>弹簧效果</td></tr>
									<tr><td><strong>elasticOut</strong></td><td></td><td></td></tr>
									<tr><td><strong>elasticBoth</strong></td><td></td><td></td></tr>
									<tr><td><strong>backIn</strong></td><td></td><td>返回效果</td></tr>
									<tr><td><strong>backOut</strong></td><td></td><td></td></tr>
									<tr><td><strong>backBoth</strong></td><td></td><td></td></tr>
									<tr><td><strong>bounceIn</strong></td><td></td><td>撞击效果</td></tr>
									<tr><td><strong>bounceOut</strong></td><td></td><td></td></tr>
									<tr><td><strong>bounceBoth</strong></td><td></td><td></td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td></td><td></td></tr>
			</table>
				<div class="example">
			<h3>示例 : </h3>
							<h5 xmlns="">CSS代码:</h5>
				<pre xmlns=""><code id="cssbox"></code></pre>
						
							<h5 xmlns="">HTML代码:</h5>
				<pre xmlns=""><code id="htmlbox"></code></pre>
									
				<h5 xmlns="">JS代码:</h5>
				<pre xmlns=""><code id="jsbox"></code></pre>
								</div>
		<div style="text-align:right">
			
					
				<button onclick="window.open('../codepages/177.html');">运行代码</button>
						
		</div><br/>	
		<div>
			<h3>同类参考 :</h3>
			<div>
							<span><a href='48.html'>F().drag</a></span>&#12288;|&#12288;							<span><a href='75.html'>F.dialog</a></span>&#12288;|&#12288;							<span><a href='51.html'>F().slides</a></span>&#12288;|&#12288;							<span><a href='74.html'>F.pagination</a></span>&#12288;|&#12288;							<span><a href='80.html'>F().tree</a></span>&#12288;|&#12288;							<span><a href='50.html'>F.menu</a></span>&#12288;|&#12288;							<span><a href='32.html'>F.datePicker</a></span>&#12288;|&#12288;							<span><a href='28.html'>F.colorPicker</a></span>&#12288;|&#12288;							<span><a href='82.html'>F.canvas</a></span>						</div>
		</div>
	</div>
</div><br />

<textarea id="css" style="display:none;">#green_bar{width:0; height:20px; background-color:green;}
#red_bar{width:800px; height:20px; background-color:red; opacity:0; filter:alpha(opacity=0)}</textarea>
<textarea id="html" style="display:none;"><div id="green_bar"></div>
<div id="red_bar"></div></textarea>
<textarea id="js" style="display:none;">F("green_bar").anime({width:800, duration:3000});
F("red_bar").anime({opacity:1, duration:1000, after:function(){
	F("red_bar").anime({width:"-700", duration:2000, type:"bounceIn"});
}});</textarea>
<textarea id="result" style="display:none;"></textarea>


<script type="text/javascript">
var css = F('css').val();
var html = F('html').val();		
var js = F('js').val();
var result = F('result').val();
css && F('cssbox').highlight(css, "css");
html && F('htmlbox').highlight(html, "html");
js && F('jsbox').highlight(js, "js");
result && F('resultbox').highlight(result,"js");
</script>

</body>
</html>